<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Linux服务器间文件传输工具 - Server to Server File Transfer</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: #2c3e50;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 500;
        }

        .server-list {
            display: flex;
            gap: 20px;
            font-size: 12px;
        }

        .server-info {
            background: rgba(255,255,255,0.1);
            padding: 5px 10px;
            border-radius: 15px;
        }

        .server-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .connection-panel {
            background: #34495e;
            padding: 15px;
            color: white;
            border-radius: 8px 8px 0 0;
        }

        .panel-title {
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .connection-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 10px;
        }

        .connection-form input {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
        }

        .connection-form input:focus {
            outline: 2px solid #3498db;
        }

        .connection-form .port-input {
            grid-column: span 1;
        }

        .connection-buttons {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            flex: 1;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-success {
            background: #27ae60;
            color: white;
        }

        .btn-success:hover {
            background: #219a52;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .btn-info {
            background: #17a2b8;
            color: white;
        }

        .btn-info:hover {
            background: #138496;
        }

        .connection-status {
            margin-top: 10px;
            padding: 8px;
            border-radius: 5px;
            font-size: 12px;
            text-align: center;
        }

        .status-connected {
            background: rgba(39, 174, 96, 0.2);
            border: 1px solid #27ae60;
        }

        .status-disconnected {
            background: rgba(231, 76, 60, 0.2);
            border: 1px solid #e74c3c;
        }

        .main-content {
            flex: 1;
            display: flex;
            gap: 10px;
            padding: 10px;
            height: calc(100vh - 80px);
        }

        .file-panel {
            flex: 1;
            background: white;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        .panel-header {
            background: #ecf0f1;
            padding: 12px 15px;
            border-bottom: 1px solid #bdc3c7;
            border-radius: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-title-text {
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .server-badge {
            background: #3498db;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
        }

        .path-bar {
            background: #f8f9fa;
            padding: 10px 15px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .path-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .file-list {
            flex: 1;
            overflow-y: auto;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            border-bottom: 1px solid #f1f2f6;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .file-item:hover {
            background: #f8f9fa;
        }

        .file-item.selected {
            background: #e3f2fd;
        }

        .file-item.dragging {
            opacity: 0.5;
        }

        .file-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .file-name {
            flex: 1;
            font-size: 14px;
            color: #2c3e50;
        }

        .file-size {
            width: 80px;
            font-size: 12px;
            color: #7f8c8d;
            text-align: right;
        }

        .file-date {
            width: 140px;
            font-size: 12px;
            color: #7f8c8d;
            text-align: right;
        }

        .drop-zone {
            border: 2px dashed #3498db;
            background: rgba(52, 152, 219, 0.1);
        }

        .panel-status {
            background: #f8f9fa;
            padding: 8px 15px;
            border-top: 1px solid #e9ecef;
            font-size: 12px;
            color: #6c757d;
            min-height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .transfer-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            justify-content: center;
        }

        .transfer-status {
            padding: 8px 15px;
            margin: 5px;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
        }

        .transfer-success {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
            border: 1px solid rgba(40, 167, 69, 0.2);
        }

        .transfer-error {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
            border: 1px solid rgba(220, 53, 69, 0.2);
        }

        .transfer-info {
            background: rgba(23, 162, 184, 0.1);
            color: #17a2b8;
            border: 1px solid rgba(23, 162, 184, 0.2);
        }

        .progress-bar {
            width: 200px;
            height: 6px;
            background: #ecf0f1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #3498db;
            transition: width 0.3s;
        }

        .hidden {
            display: none;
        }

        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #7f8c8d;
            flex-direction: column;
            gap: 10px;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #ecf0f1;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 10px 15px;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #f5c6cb;
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 10px 15px;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #c3e6cb;
        }

        .server-info-tooltip {
            position: relative;
            cursor: help;
        }

        .server-info-tooltip:hover::after {
            content: attr(data-info);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #2c3e50;
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🚀 Linux服务器间文件传输工具</h1>
        <div class="server-list" id="server-list">
            <span>未连接任何服务器</span>
        </div>
    </div>

    <div class="main-content">
        <!-- 服务器1完整面板 -->
        <div class="server-panel">
            <!-- 服务器1连接面板 -->
            <div class="connection-panel">
                <div class="panel-title">
                    🌐 服务器1连接
                    <span class="server-info-tooltip" id="server1-info-btn" data-info="">ℹ️</span>
                </div>
                <div class="connection-form">
                    <input type="text" id="server1-host" placeholder="主机地址" value="192.168.1.6">
                    <input type="text" id="server1-username" placeholder="用户名" value="orangepi">
                    <input type="password" id="server1-password" placeholder="密码" value="15523550665">
                    <input type="number" id="server1-port" placeholder="端口" value="22" class="port-input">
                </div>
                <div class="connection-buttons">
                    <button class="btn btn-primary" id="server1-connect-btn">连接</button>
                    <button class="btn btn-danger hidden" id="server1-disconnect-btn">断开</button>
                    <button class="btn btn-info hidden" id="server1-info-btn-action">服务器信息</button>
                </div>
                <div class="connection-status status-disconnected" id="server1-status">
                    未连接
                </div>
            </div>

            <!-- 服务器1文件面板 -->
            <div class="file-panel">
                <div class="panel-header">
                    <span class="panel-title-text">
                        📁 服务器1文件
                        <span class="server-badge hidden" id="server1-badge">未连接</span>
                    </span>
                    <button class="btn btn-success hidden" id="server1-refresh">刷新</button>
                </div>
                <div class="path-bar">
                    <span>路径:</span>
                    <input type="text" class="path-input" id="server1-path" value="/home/orangepi" readonly>
                    <button class="btn btn-success hidden" id="server1-navigate">进入</button>
                </div>
                <div class="file-list" id="server1-files">
                    <div class="loading">
                        <div class="spinner"></div>
                        <span>请先连接服务器1</span>
                    </div>
                </div>
                <div class="panel-status" id="server1-status-panel">
                    <span id="server1-status-text">等待连接...</span>
                    <div class="transfer-progress hidden" id="server1-transfer-progress">
                        <span id="server1-transfer-text">传输中...</span>
                        <div class="progress-bar">
                            <div class="progress-fill" id="server1-progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务器2完整面板 -->
        <div class="server-panel">
            <!-- 服务器2连接面板 -->
            <div class="connection-panel">
                <div class="panel-title">
                    🌐 服务器2连接
                    <span class="server-info-tooltip" id="server2-info-btn" data-info="">ℹ️</span>
                </div>
                <div class="connection-form">
                    <input type="text" id="server2-host" placeholder="主机地址" value="">
                    <input type="text" id="server2-username" placeholder="用户名" value="">
                    <input type="password" id="server2-password" placeholder="密码" value="">
                    <input type="number" id="server2-port" placeholder="端口" value="22" class="port-input">
                </div>
                <div class="connection-buttons">
                    <button class="btn btn-primary" id="server2-connect-btn">连接</button>
                    <button class="btn btn-danger hidden" id="server2-disconnect-btn">断开</button>
                    <button class="btn btn-info hidden" id="server2-info-btn-action">服务器信息</button>
                </div>
                <div class="connection-status status-disconnected" id="server2-status">
                    未连接
                </div>
            </div>

            <!-- 服务器2文件面板 -->
            <div class="file-panel">
                <div class="panel-header">
                    <span class="panel-title-text">
                        📁 服务器2文件
                        <span class="server-badge hidden" id="server2-badge">未连接</span>
                    </span>
                    <button class="btn btn-success hidden" id="server2-refresh">刷新</button>
                </div>
                <div class="path-bar">
                    <span>路径:</span>
                    <input type="text" class="path-input" id="server2-path" value="/home" readonly>
                    <button class="btn btn-success hidden" id="server2-navigate">进入</button>
                </div>
                <div class="file-list" id="server2-files">
                    <div class="loading">
                        <div class="spinner"></div>
                        <span>请先连接服务器2</span>
                    </div>
                </div>
                <div class="panel-status" id="server2-status-panel">
                    <span id="server2-status-text">等待连接...</span>
                    <div class="transfer-progress hidden" id="server2-transfer-progress">
                        <span id="server2-transfer-text">传输中...</span>
                        <div class="progress-bar">
                            <div class="progress-fill" id="server2-progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="renderer.js"></script>
</body>
</html> 